<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
    <meta name="robots" content="noindex, nofollow">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- 将百度地图API引入，设置好自己的key -->
    <!--<script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=zc8IbOv8nA8HxKHxHR1wvNw3IPAe4Lhs"></script>-->
    <!-- 页面meta -->


    <meta charset="utf-8">
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <style>


        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
            border: 1px dashed #d9d9d9;
        }

        .datatable {
            position: relative;
            box-sizing: border-box;
            -webkit-box-flex: 1;
            width: 100%;
            max-width: 100%;
            font-size: 14px;
            color: rgb(96, 98, 102);
            overflow: hidden;
            flex: 1 1 0%;
        }

        .datatable td, .datatable th {
            padding: 12px 0;
            min-width: 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
            text-align: left;
        }
    </style>
</head>

<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
<p><input id="startBtn" type="button" onclick="startTool();" value="开启取点工具" /><input type="button" onclick="map.clearOverlays();document.getElementById('info').innerHTML = '';points=[];" value="清除" /></p>
<div id="info"></div>
</body>


</html>
<script type="text/javascript">
    var map = new BMap.Map("container");                        // 创建Map实例
    map.centerAndZoom("北京", 11);     // 初始化地图,设置中心点坐标和地图级别

    var key = 1;    //开关
    var newpoint;   //一个经纬度
    var points = [];    //数组，放经纬度信息
    var polyline = new BMap.Polyline(); //折线覆盖物

    function startTool(){   //开关函数
        if(key==1){
            document.getElementById("startBtn").style.background = "green";
            document.getElementById("startBtn").style.color = "white";
            document.getElementById("startBtn").value = "开启状态";
            key=0;
        }
        else{
            document.getElementById("startBtn").style.background = "red";
            document.getElementById("startBtn").value = "关闭状态";
            key=1;
        }
    }
    map.addEventListener("click",function(e){   //单击地图，形成折线覆盖物
        newpoint = new BMap.Point(e.point.lng,e.point.lat);
        if(key==0){
            //    if(points[points.length].lng==points[points.length-1].lng){alert(111);}
            points.push(newpoint);  //将新增的点放到数组中
            polyline.setPath(points);   //设置折线的点数组
            map.addOverlay(polyline);   //将折线添加到地图上
            document.getElementById("info").innerHTML += "new BMap.Point(" + e.point.lng + "," + e.point.lat + "),</br>";    //输出数组里的经纬度
        }
    });
    map.addEventListener("dblclick",function(e){   //双击地图，形成多边形覆盖物
        if(key==0){
            map.disableDoubleClickZoom();   //关闭双击放大
            var polygon = new BMap.Polygon(points);
            map.addOverlay(polygon);   //将折线添加到地图上
        }
    });
    map.enableScrollWheelZoom(true);
</script>